{%load static%}
<!DOCTYPE html>
<html lang="en">
<head>
    <link rel="stylesheet" href="/static/css/web.css">
    <meta charset="UTF-8">
    <title>UserInfo</title>
    <style type="text/css">
        .Content-Main{
            max-width: 500px;
            margin: auto;
            border: none;
            border-radius: 5px; 
            -moz-border-radius: 5px;
            -webkit-border-radius: 5px;
            font: 12px "Helvetica Neue", Helvetica, Arial, sans-serif;
            text-shadow: 1px 1px 1px #444;
            color: #D3D3D3;
            background: #555;
        }
        .Content-Main h1{
            padding: 8px 0px 40px 10px;
            display: block;
            border-bottom: 1px solid #444;
        }
        .text1{
            margin-left: 3px;
        }
        .Content-Main label{
            margin: 0px 0px 5px;
            display: block;
        }
         .fileInputContainer{
            height: 99px;
            width: 99px;
            margin: 20px 20px 20px 20px ;
            border: none;
            overflow: hidden; 
            position: relative; 
        }
        .fileInputContainer img{
            width: 100%;height: 100%;
            object-fit: contain;
        }
        img {
            width: 80px;
            height: 80px;
            margin-right: 10px;
            grid-area: img;
        }
        {% comment %} .fileInput{
            height: 106px;
            border: none;
            font-size: 300px;
            opacity: 0;  
            filter:alpha(opacity=0);
            cursor: pointer;
            position: absolute;
        } {% endcomment %}
        .Content-Main label>span{
            width: 20%;
            float: left;
            text-align: right;
            padding-right: 10px;
            margin-top: 10px;
            font-weight: bold;
        }
        .Main-sex{
            padding-right: 13px;
            padding-bottom: 13px;
            font-weight: bold;
            line-height: 4px; 
        }
        .Main-sex input[type=checkbox]{
            margin-top:6px;
            vertical-align:middle; 
        }
        .Content-Main input[type="text"],.Content-Main input[type="email"],.Content-Main textarea{
            height: 25px;
            width: 70%;
            line-height: 15px;
            padding: 5px 0px 5px 5px; 
            margin-bottom: 16px;
            margin-right: 6px;
            margin-top: 2px;
            border: none;
            border-radius:2px;
            -webkit-border-radius:2px;
            -moz-border-radius:2px;
            outline: 0 none; 
            background:  #DFDFDF;
            color: #525252;
        }
        .Content-Main textarea{
            height: 100px;
            width: 70%;
            padding: 5px 0px 0px 5px;
        }
        .Content-Main .button{
            padding: 8px 24px 8px 24px;
            margin-bottom: 8px;
            border: none;
            border-radius: 4px;
            -moz-border-radius: 4px;
            -webkit-border-radius: 4px;
            font-weight: bold;
            text-shadow: 1px 1px 1px #FFE477;
            box-shadow: 1px 1px 1px  #3D3D3D;
            -moz-box-shadow: 1px 1px 1px  #3D3D3D;
            -webkit-box-shadow: 1px 1px 1px  #3D3D3D;
            color: #585858;
            background: #f6ff0a;
        }
        .Content-Main .button:hover{
            color:  #333;
            background-color:  #EBEBEB ;
        }
    </style>
</head>
<body>
    <nav class="menu">
        <div class="logo">
            <a href="/index/"><img src="/static/img/参考magazine-unlock-05-2.3.8792-529240D9E5BFBECB08C7D.jpg"
                    alt="logo"></a>
        </div>
        <ul class="menu-section">
            <li class="combobox" id="campusbox">
                <div class="box-title">
                    <i class="iconfont icon-dizhibu"></i>
                    <span>校区</span>
                    <i class="iconfont icon-qiehuan1x"></i>
                </div>
                <ul class="shift-3">
                    <li class="category">
                        <a class="link" href="/hcampus/">
                            <i class="iconfonts icon-hd"></i>
                            <span>海淀校区</span>
                        </a>
                    </li>
                    <li class="category">
                        <a class="link" href="/fcampus/">
                            <i class="iconfonts icon-ft"></i>
                            <spab>丰台校区</spab>
                        </a>
                    </li>
                    <li class="category">
                        <a class="link" href="#">
                            <i class="iconfonts icon-hn"></i>
                            <span>海南校区</span>
                        </a>
                    </li>
                </ul>

            </li>
        </ul>
        <ul class="menu-section grow">
            <li id="sort" class="combobox">
                <div class="box-title">
                    <i class="iconfont icon-hudonggongju"></i>
                    <span>商品分类</span>
                    <i class="iconfont icon-qiehuan1x"></i>
                </div>
                <ul class="shift-4">
                    <li class="category">
                        <a class="link" href="" target="">
                            <i class="iconfonts icon-shangpin"></i>
                            <span>全部商品</span>
                        </a>
                    </li>
                    <li class="category">
                        <a class="link" href="" target="">
                            <i class="iconfonts icon-shangpin"></i>
                            <span>最近商品</span>
                        </a>
                    </li>
                    <li class="category">
                        <a class="link" href="" target="">
                            <i class="iconfonts icon-shangpin"></i>
                            <span>热卖商品</span>
                        </a>
                    </li>
                </ul>

            </li>
            <li class="sepearator"></li>
            <li id="my-profile" class="category">
                <a href="/order/" target="" class="link">
                    <i class="iconfont icon-user"></i>
                    <div class="title-nav">
                        <span>个人订单</span>
                    </div>
                </a>
            </li>
            <li id="message" class="category">
                <a href="" target="" class="link">
                    <i class="iconfont icon-gerenyouxiang_cebianlan_shoujianxiang"></i>
                    <div class="title-nav">
                        <span>我的消息</span>
                    </div>
                </a>
            </li>
            <li id="user" class="combobox">
                <div class="box-title">
                    <img src="/media/{{user.Avatr}}" alt="user" class="user-avatar">
                    <div class="uesr-and-status">
                        <span class="user-name">
                            {{user.Name}}

                        </span>
                        <div class="user-status">
                            <span class="in-school">在校</span>
                        </div>
                    </div>
                    <i class="iconfont icon-qiehuan1x"></i>
                </div>
                <ul class="shift-5">
                    <li class="combobox-text">
                        <span>选择你的状态</span>
                    </li>
                    <li class="status-switch">
                        <span class="in-school">在校</span>
                        <span class="out-school">离校</span>
                        <span class="busy">勿扰</span>
                    </li>
                    <li class="category">
                        <a href="/personalinfo/" class="link">
                            <i class="iconfont icon-gear-settings"></i>
                            <div class="title-nav">
                                <span>设置</span>
                            </div>
                        </a>
                    </li>
                    <li class="category">
                        <a href="/vlogout/" class="link">
                            <i class="iconfont icon-tuichu"></i>
                            <div class="title-nav">
                                <span>退出</span>
                            </div>
                        </a>
                    </li>
                </ul>
            </li>
        </ul>
    </nav>
    <div class="Content-Main">
        <form  action="" method="post" class="form-userInfo" enctype="multipart/form-data">
           {% csrf_token %}
            <h1>个人信息</h1>
            <span class="text1"> </span>
            <h1>个人信息</h1>
            <span class="text1">请完善个人信息</span>
            <p>
            <div class="fileInputContainer">
                <img src="{{MEDIA_URL}}{{media.Avatr}}" alt="">
            </div><p>点击图片更换头像</p>
            <input   type="file" name="file" >
            <label>
                <span>姓名:</span>
                <input type="text"  name="name" value={{media.Name}} >
            </label>
            <label class="Main-sex">
                <span>性别:</span>
                <input type="radio" class="man" name='gender' value="1" {% if media.Gender == '1' %}checked{% endif %}>男
                <input type="radio" class="women" name='gender' value="2" {% if media.Gender == '2' %}checked{% endif %}>女
            </label>
            <label class="Main-sex">
               <span>校区:</span>
                 <input type="radio" name='school' value="1" {% if media.location == '1' %}checked{% endif %}>丰台校区
                 <input type="radio" name='school' value="2" {% if media.location == '2' %}checked{% endif %}>海淀校区
                 <input type="radio" name='school' value="3" {% if media.location == '3' %}checked{% endif %}>海南校区
                </label>
            <label>
                <span>微信号码 :</span>
                <input type="text" name="wxnumber" value={{media.WX_id}} >
            </label>
            <label>
                <span>电话号码:</span>
                <input type="text" name="phone" value={{media.Phone}}  >
            </label>
            <label>
                <span>个人介绍:</span>
                <textarea id="message" name="message" >{{media.Introduction}}</textarea>
            </label>
            <label>
                <input type="submit" class="button" value="提交">
            </label>
        </form>
    </div>
   
<script src={% static "js/web.js"%}></script>
</body>
</html>